How to Create a WordPress Custom Menu with Walker Nav Menu Class

Many WordPress themes require some specific elements in the menu items. A simple example is the Bootstrap 3 menu with specific dropdown elements. In this tutorial we will learn how to build your own WordPress custom menu with a Walker_Nav_Menu class.

Why Would You want a Custom Menu?

If you are a theme builder or you are even creating a custom solution, you would need a WordPress custom menu in several situations. Here are some of them:

• Show different menu items to visitors and logged-in users
• Add other elements requested in the navigation by frameworks (Bootstrap, Foundation, …)
• Include different information based on menu types (categories, pages, posts, tag, BuddyPress page, …)

These are only some of possible scenarios you could create your own WordPress custom menu walker.

Our WordPress Custom Menu

In this tutorial we will create a simple custom menu. Our menu will include the description of links and we will not create a link (a element) if there is no link to it. We will then create a span element.

We will do that using the theme Twenty Sixteen for styling purposes so that you can also try the code and the styling much easier. That is, if you are using the latest WordPress version.

We could use the Walker class that is being used for many items inside WordPress, but we would need to set some other parameters. By extending Walker_Nav_Menu all the default parameters are set from the beginning.

Base of our Custom Walker

This is just to start our walker. You can add this inside the functions.php file in the folder twentysixteen.

We are adding this before changing the theme’s header so that we do not get an error.

Changing the Twenty Sixteen Menu

To change the menu and add our own custom walker, open <code>header.php</code> and change this small part:

That’s it! We have added our walker and we can now start creating our own Custom WordPress Menu.

WordPress Custom Menu Item

The item is displayed by the static method start_el. This method accepts few parameters, some of them are self-explanatory, but two of them are hard to work with if we don’t know what they contain.

The two of them are $item and $args. The $output is a variable passed by reference. This means that it does not have to be returned. Everything that happens in this method to that variable will be available in the next iteration also.

The variable $item is an object that represents the an item of the menu. This is an example of a custom link:

Please take some time to read those values and understand them. Have some fun, change the menu items information and see what will change in there. For example, the title is the value that you will type in the Navigation label input.

To make the Description label visible, you must scroll to the top and click on the Screen options. Once there, you need to check the Description to make it visible.

The variable $args contains every information we pass into the function wp_nav_menu. This can be used to enter some information from the arguments into our WordPress custom menu.

Preparing variables

Some of the information inside the $item object will be used in our custom menu. Let’s prepare them:

The variables that we will use here are actually $permalink, $title and $description.

Creating the Menu Item

We are now prepared to create our menu item. Use this code for that:

We will first create our li element with all the classes we have received from WordPress. This is done by using the PHP function implode.

After that, we are checking if there is a permalink. If the permalink only contains # then we are not considering it a link. For that case we will create a span element instead of a.

Once that is done, our output will get also the title of our item.

We are then checking if there is a description. If the variable $description is not empty and we are on the first level ($depth==0), we will add the description to the output.

At the end of our item, we are again having the same check for the permalink, but not for opening our element. We are doing it for closing the element.

Adding the Styles

Since we are working with the Twenty Sixteen theme, I have also created some styles for our non-link elements and for the description. Add this:

With that styles I have now this:

Want to learn more advanced topics? Check out my course by clicking on the image below.

Conclusion

Creating WordPress custom menu can be a daunting task if you are not aware of all the information that is available to you. There are menu walkers out there, probably for any framework you work with. The most important part I wanted for you to take from this tutorial is that you can control every part of each menu item.

This really can come in handy when working on some custom solutions or very specific themes.

Have you worked with some custom menus? Did you build your own menu walker or used one? Please do share that in the comments below:)

 

Become a Sponsor